<template>
  <div>
    <!-- 
      v-text => 代替了webapi中的 innerText

      v-html => 代替了webapi中的 innerHTML

      观察发现 v-text 使用时不允许当前标签内有任何子元素
      原因: 本来当前元素中的内容就会被v-text中的内容覆盖，所以当前标签中的子元素显得毫无意义甚至影响页面的渲染效率
    -->

    <!-- pDom.innerText = ？？？ 来覆盖原本p标签中的内容 -->
    <p v-text="text"></p>
    <p v-html="text"></p>
  </div>
</template>

<script>
export default {
  name: 'DemoIndex07',
  data () {
    return {
      text: '<span style="color: red;">这是一个字符串</span>'
    }
  }
}
</script>

<style>

</style>